<template>
  <router-view v-slot="{ Component }">
    <transition name="slide-fade">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup>
</script>

<style scoped>
/* 移除可能存在的全局样式 */
html, body, #app {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  /* 禁用浏览器滚动条 */
  overflow: hidden !important;
}

/* 确保 el-main 有滚动条 */
.el-main {
  overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
}

/* 自定义 WebKit 浏览器滚动条样式 */
.el-main::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.el-main::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景颜色 */
}

.el-main::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滚动条滑块圆角 */
}

.el-main::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬停时滚动条滑块颜色 */
}

/* 隐藏 Firefox 浏览器滚动条(如果需要保留样式可移除) */
.el-main {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}
</style>
